<template>
  <ga-modal
    v-model:visible="visible"
    title-align="start"
    :width="600"
    @close="handleCancel(formRef)"
  >
    <template #title>{{ curId ? "编辑" : "创建" }}</template>
    <ga-spin style="width: 100%" :loading="loading">
    <ga-form ref="formRef" :model="formData">
      <ga-form-item
        field="type"
        label="平台类型"
        label-col-flex="70px"
        :rules="[RULE.NOT_NULL]"
        :validate-trigger="['change', 'input']"
      >
        <ga-select v-model="formData.type" size="small" placeholder="请选择平台类型">
          <ga-option
            v-for="(item,idx) in platformTypeList"
            :key="idx"
            :label="item.label"
            :value="item.value"
          />
        </ga-select>
      </ga-form-item>
      <ga-form-item
        field="name"
        label="平台名称"
        label-col-flex="70px"
        :rules="[RULE.NOT_NULL]"
        :validate-trigger="['change', 'input']"
      >
        <ga-input v-model="formData.name"  placeholder="请输入平台名称" />
      </ga-form-item>
      <ga-form-item
        field="host"
        label="IP/域名"
        label-col-flex="70px"
        :rules="[RULE.NOT_NULL]"
        :validate-trigger="['change', 'input']"
      >
      <ga-input v-model="formData.host" placeholder="请输入IP" />
      </ga-form-item>
      <ga-form-item
        field="username"
        label="用户名称"
        label-col-flex="70px"
        :rules="[RULE.NOT_NULL]"
        :validate-trigger="['change', 'input']"
      >
        <ga-input v-model="formData.username" placeholder="请输入用户名称" />
      </ga-form-item>
      <ga-form-item
        field="password"
        label="密码"
        label-col-flex="70px"
        :rules="[RULE.NOT_NULL]"
        :validate-trigger="['change', 'input']"
      >
        <ga-input-password v-model="formData.password" placeholder="请输入密码" />
      </ga-form-item>
      <ga-form-item
        field="apiVersion"
        label="版本"
        label-col-flex="70px"
        :rules="[RULE.NOT_NULL]"
        :validate-trigger="['change', 'input']"
      >
        <ga-input v-model="formData.apiVersion" placeholder="请输入版本" />
      </ga-form-item>
      <ga-form-item label="备注" field="description" label-col-flex="70px">
        <ga-textarea v-model="formData.description" placeholder="请输入内容" />
      </ga-form-item>
    </ga-form>
  </ga-spin>
    <template #footer>
      <ga-button @click="visible = false">取消</ga-button>
      <ga-button type="primary" @click="handleOk">确定</ga-button>
    </template>
  </ga-modal>
</template>

<script setup>
import { ref, defineEmits, reactive } from "vue";
import { createList, editList,getListDetail } from '@/api/hostMgmt';
import { Message } from "@garco-design/web-vue";
import { RULE } from "@/constant/validators";
import { platformTypeList } from "@/constant";
import useLoading from '@/hooks/loading';

const { loading, setLoading } = useLoading(false);
const formRef = ref(null);
const formData = reactive({
  name: "",
  type: "",
  apiVersion: "",
  host: "",
  username: "",
  password: "",
  description: ""
});

const visible = ref(false);
const curId = ref("");
const open = async(val) => {
  console.log('val------',val);
  visible.value = true;
  if (val && val?.id) {
    setLoading(true)
    curId.value = val.id
    const { data } = await getListDetail(curId.value)
    Object.keys(formData).forEach((item) => {
      formData[item] = data[item]
    })
    setLoading(false)
  }
};

// 保存
const emits = defineEmits(["fetchData"])
const handleOk = async () => {
  const res = await formRef.value?.validate()
  if (!res) {
    try {
      const { code } = !curId.value ? await createList(formData):await editList(curId.value, formData)
      if (code === 20000) Message.success('操作成功')
      emits('fetchData')
    } finally {
      visible.value = false
    }
  }
};
const handleCancel = (formEl) => {
  curId.value = ""
  formEl.resetFields()
};
defineExpose({ open })
</script>

<style lang="scss" scoped>

</style>
